<template>
    <div class="page-container">
        <el-card class="box-card">
            <el-row>
                <el-col :span="16">
                    <el-row>
                        <el-date-picker
                            v-model="dateList"
                            type="daterange"
                            unlink-panels
                            range-separator=" - "
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            value-format="YYYY-MM-DD"
                            :shortcuts="shortcuts"
                            size="small"
                            @change="selectTimes"
                            style="flex-grow: 0;width: 240px"
                        />
                        <el-select v-model="params.code" size="small" placeholder="选择单据类型" clearable filterable style="margin: 0 15px;width: 150px">
                            <el-option v-for="item in matterList" :key="item.id" :label="item.name" :value="item.code"/>
                        </el-select>
                        <el-input v-model="params.streamNo" size="small" clearable placeholder="单据号" style="width: 170px"/>
                        <el-button size="small" type="primary" @click="getTableList" icon="ele-Search" style="margin-left: 15px">查询</el-button>
                        <el-button size="small" @click="onReset" icon="ele-Refresh">重置</el-button>
                    </el-row>
                </el-col>
                <el-col :span="8">
                    <el-row justify="end">
                        <el-button type="primary" size="small">新增应付</el-button>
                        <el-button type="primary" size="small">新增免付</el-button>
                    </el-row>
                </el-col>
            </el-row>

            <el-tabs v-model="params.settle" @tab-change="getTableList">
                <el-tab-pane label="未结清" :name="0"/>
                <el-tab-pane label="已结清" :name="1"/>
            </el-tabs>

            <div class="table-box">
                <el-table :data="tableList" size="small" border class="tableList" :span-method="tableSpan" :header-cell-style="{textAlign: 'center'}" :cell-style="{textAlign: 'center'}">
                    <el-table-column prop="targetName" label="公司/个人"/>
                    <el-table-column prop="totalAmount" label="总额"/>
                    <el-table-column prop="payAmount" label="应付未付"/>
                    <el-table-column prop="orderId" label="单据">
                        <template v-slot="{row}">
                            <el-button size="small" v-if="row['agendaMatter']" type="primary" text link>
                                {{ row['agendaMatter']['codeName'] + ' - ' + (row.streamNo || row['agendaMatter']['info']['capitalStreamNo']) }}
                            </el-button>
                        </template>
                    </el-table-column>
                    <el-table-column prop="amount" label="金额"/>
                    <el-table-column label="关联">
                        <template v-slot="{row}">
                            <template v-if="row['agendaMatter'] && row['agendaMatter']['relateItems']">
                                <div v-for="item in row['agendaMatter']['relateItems']" v-show="item.label.indexOf('员工') < 0 && item.label.indexOf('供') < 0" :key="item.id">{{ item.label.replace('/', '：') }}</div>
                            </template>
                        </template>
                    </el-table-column>
                    <el-table-column prop="confirmDate" label="日期"/>
                    <el-table-column label="创建人/部门">
                        <template v-slot="{row}">
                            <span v-if="row['agendaMatter']">{{ row['agendaMatter']['sponsor'].userName + '/' + row['agendaMatter']['sponsor']['oaDeptName'] }}</span>
                        </template>
                    </el-table-column>
                    <!--          <el-table-column align="center" label="操作" >-->
                    <!--            <template v-slot="scope">-->
                    <!--              <el-button size="small" type="primary" link @click="viewDetail(scope.row)">查看详情</el-button>-->
                    <!--              <el-button size="small" type="primary" link @click="viewProcureOrder(scope.row)">查看采购订单</el-button>-->
                    <!--            </template>-->
                    <!--          </el-table-column>-->
                </el-table>
                <div class="page-block">
                    <el-pagination
                        v-model:currentPage="params.current"
                        v-model:page-size="params.size"
                        :page-sizes="[10, 20, 30, 40]"
                        :small="true"
                        :disabled="false"
                        :background="false"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total"
                        :hide-on-single-page="true"
                        @size-change="sizeChange"
                        @current-change="getTableList"
                    />
                </div>
            </div>
        </el-card>

        <!-- 新增应付款 -->
        <el-dialog v-model="paymentVisible" title="新增应付款" destroy-on-close width="560px">
            <div class="mb-2 flex items-center text-sm">
                <el-form :model="paymentForm" :rules="paymentRules" size="small" ref="paymentFormRef" label-width="110px" class="drawer-form">
                    <el-form-item prop="customId" label="供应商：">
                        <el-input v-model="paymentForm.customId" placeholder="供应商" style="width: 250px;"/>

                    </el-form-item>
                    <el-form-item prop="receivableAccount" label="应付总额：">
                        <el-input v-model="paymentForm.receivableAccount" type="number" placeholder="应付总额" style="width: 250px;"/>
                    </el-form-item>
                    <el-form-item prop="notReceived" label="应付未付：">
                        <el-input v-model="paymentForm.notReceived" type="number" placeholder="应付未付" style="width: 250px;"/>
                    </el-form-item>
                    <el-form-item prop="state" label="是否结清：">
                        <el-select v-model="paymentForm.state" style="width: 200px;height: 26px;" size="small">
                            <el-option label="未结清" :value="0"/>
                            <el-option label="已结清" :value="1"/>
                        </el-select>
                    </el-form-item>
                    <el-form-item prop="null" label="无原型图">

                    </el-form-item>
                </el-form>
            </div>
            <template #footer>
          <span class="dialog-footer">
            <el-button size="small" @click="paymentVisible = false">关闭</el-button>
            <el-button size="small" type="primary" icon="ele-Check" @click="paymentSubmit(paymentFormRef)">提交</el-button>
          </span>
            </template>
        </el-dialog>

    </div>
</template>

<script>
import {reactive, toRefs, ref, onMounted} from 'vue'
import {getSupplierSelector} from '/@/api/supplier'
import billPayableApi from '/@/api/money/billPayable'
import {getModuleMatters} from '/@/api/matter'

export default {
    name: 'Payment',
    setup() {
        const paymentFormRef = ref()
        const state = reactive({
            supplierOption: [],
            paymentVisible: false,
            params: {
                current: 1,
                size: 10,
                code: null,
                streamNo: null,
                settle: 0,
                st: null, // 开始时间
                et: null // 结束时间
            },
            total: 0,
            dateList: [],
            matterList: [],   // 事项筛选列表
            shortcuts: [
                {
                    text: '最近半年',
                    value: () => {
                        const end = new Date()
                        const start = new Date()
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 183)
                        return [start, end]
                    }
                },
                {
                    text: '最近一年',
                    value: () => {
                        const end = new Date()
                        const start = new Date()
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 365)
                        return [start, end]
                    }
                }
            ],
            tableList: [],
            paymentRules: {},
            paymentForm: {
                customId: '',
                amount: '',
                unpaid: '',
                state: '0'  //是否结清
            }
        })
        //获取数据
        const getTableList = () => {
            billPayableApi.getPage(state.params).then(res => {
                state.tableList = res.data.records
                state.total = res.data.total
            }).catch(e => console.log(e))
        }
        //打开新增应付款
        const openCreate = () => {
            getSupplierSelector().then(res => {
                state.supplierOption = res.data
            })
            state.paymentVisible = true
        }
        //查看详情
        const viewDetail = () => {

        }
        //查看采购单
        const viewProcureOrder = () => {

        }
        //重置
        const onReset = () => {
            state.params = {
                current: state.params.current,
                size: state.params.size,
                settle: state.params.settle,
                code: null,
                streamNo: null,
                st: null,
                et: null
            }
            state.dateList = []
            getTableList()
        }
        //表单提交
        const paymentSubmit = (formEl) => {
            if (!formEl) return
            formEl.validate((valid) => {
                if (!valid) return // 必填没有填就直接结束
            })
        }
        // 筛选时间
        const selectTimes = (val) => {
            if (val && val.length > 0) {
                state.params.st = val[0]
                state.params.et = val[1]
            } else {
                state.params.st = state.params.et = null
            }
            getTableList()
        }
        //修改类型选择
        const selectType = (val) => {
            if (val) {
                getTableList()
            }
        }
        //table列合并
        const tableSpan = (item) => {
            let spanNum = 1
            if (item.columnIndex < 3) {
                spanNum = item.row.spanNum
            }
            return {
                rowspan: spanNum, // 合并的行数
                colspan: 1 // 合并的列数，为0表示不显示
            }
        }
        const sizeChange = (size) => {
            state.params.size = size
            state.params.current = 1
            getTableList()
        }

        onMounted(() => {
            getTableList()
            // 获取钱相关的事项列表
            getModuleMatters('Money').then(res => state.matterList = res.data).catch(e => console.log(e))
        })

        return {
            ...toRefs(state),
            paymentFormRef,
            getTableList,
            openCreate,
            viewDetail,
            viewProcureOrder,
            sizeChange,
            onReset,
            paymentSubmit,
            tableSpan,
            selectTimes,
            selectType

        }
    }
}
</script>

<style scoped lang="scss">
.page-container {
    .table-box {
        background: #fff;
        margin-top: 10px;

        :deep(.el-table__header-wrapper .el-table__cell) {
            background: var(--el-color-primary-light-9);
            color: var(--next-bg-menuBar-light-1);
        }

        :deep(thead .cell) {
            display: flex;
            align-items: center;
            justify-content: center;
        }

        :deep(thead .el-icon) {
            margin-top: -2px;
            cursor: pointer;
        }

        .primary {
            cursor: pointer;
            color: var(--el-color-primary);
        }

    }
}
</style>
